import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import ScanQRCodeIcon from '../assets/icon/scan-qrcode.svg';
import GenerateQRCodeIcon from '../assets/icon/generate-qrcode.svg';
import ScanScreen from '../views/ScanScreen';
import ScanResultScreen from '../views/ScanResultScreen';
import GenerateScreen from '../views/GenerateScreen';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const Scan = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="ScanScreen"
        component={ScanScreen}
        options={{headerShown: false}}
      />
      <Stack.Screen name="ScanResultScreen" component={ScanResultScreen} />
    </Stack.Navigator>
  );
};

const Nav = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Scan"
          component={Scan}
          options={{
            tabBarLabel: '扫描二维码',
            tabBarIcon: ({color, size}) => (
              <ScanQRCodeIcon with={size} height={size} fill={color} />
            ),
          }}
        />
        <Tab.Screen
          name="Generate"
          component={GenerateScreen}
          options={{
            tabBarLabel: '生成二维码',
            tabBarIcon: ({color, size}) => (
              <GenerateQRCodeIcon with={size} height={size} fill={color} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default Nav;
